<%--
  Created by IntelliJ IDEA.
  User: littleken
  Date: 2018/5/25
  Time: 9:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>验证码对比分析</title>
</head>
<body>
    <form action="">
        <p>验证码：
            <input type="text" name="kaptcha" id="code" maxlength="4" placeholder="请输入验证码"/>
            <img src="http://localhost:8080/kaptcha.jpg" id="changecode"/>
        </p>
        <p>

            <input type="button" value="登录" id="login">
        </p>
        <div id="result"></div>
    </form>
    <script src="/js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script>

        //设置验证码点击刷新
        $(function () {
           $("#changecode").on("click",function () {
               $(this).attr("src","http://localhost:8080/kaptcha.jpg?d="+new Date().getTime());
           }) ;
        });
    //绑定登录按钮事件
        $("#login").on("click",function () {
           //获取用户输入的验证码
            var code =  $("#code").val();
            //alert(code);
            var params = {"code":code};
            $.post("http://localhost:8080/login",params,function (data) {
               if(data == "success"){
                   $("#result").html("验证成功")
               }else if(data == "fail") {
                   $("#result").html("验证失败，请重新输");
                   //输入框清空并获取焦点
                   $("#code").val("").focus();
               }else{
                   $("#result").html("null");
               }
            });
        });
    </script>

<%--    <script>

        $(function(){
            $("#changecode").on("click",function(){
                $(this).attr("src","http://localhost:8080/kaptcha.jpg?d="+new Date().getTime());
            });
            //给登录按钮绑定点击事件
            $("#login").on("click",function(){
                //获取用户输入的验证码
                //alert("点击");
                var code = $("#code").val();
                //alert(code);
                var params = {"code":code};
                $.post("http://localhost:8080/login\"",params,function(data){
//                if(data=="fail"){
//                     alert("验证码输入有误!");
//                }
                    if(data=="success"){
                        $("#result").html("验证码输入正确");
                    }else{
                        $("#result").html("验证码输入有误，请重新输入...");
                        $("#code").val("").focus();
                    }
                });
            });
        })

    </script>--%>
</body>
</html>
